<template>
	<view class="team_members_page">
		<!-- 待结算收益模块 -->
		<view class="all_income_block m_b_24" @click="toDetail()">
			<view class="all_income_text">
				<view class="income_title">工作室待结算总收益金额(元)</view>
				<view class="view_detail">
					<view>查看收益明细</view>
					<uni-icons type="right" size="16" color="#999999" />
				</view>
			</view>
			<view class="all_income_money">{{ teamMembers.pendingSettlem?.totalAmount ?? 0 }}</view>
			<view class="income_detail_box">
				<view class="income_item">
					<view class="income_money">¥{{ teamMembers.pendingSettlem?.mallAmount ?? 0 }}</view>
					<view class="income_name">商城推广</view>
				</view>
				<view class="income_item">
					<view class="income_money">¥{{ teamMembers.pendingSettlem?.refereeServiceAmount ?? 0 }}</view>
					<view class="income_name">陪宠推广</view>
				</view>
				<view class="income_item">
					<view class="income_money">¥{{ teamMembers.pendingSettlem?.serviceAmount ?? 0 }}</view>
					<view class="income_name">陪宠服务</view>
				</view>
			</view>
		</view>
		<!-- 已结算收益模块 -->
		<view class="all_income_block" @click="toDetail()">
			<view class="all_income_text">工作室已结算总收益金额(元)</view>
			<view class="all_income_money">{{ teamMembers.settle?.totalAmount ?? 0 }}</view>
			<view class="income_detail_box">
				<view class="income_item">
					<view class="income_money">¥{{ teamMembers.settle?.mallAmount ?? 0 }}</view>
					<view class="income_name">商城推广</view>
				</view>
				<view class="income_item">
					<view class="income_money">¥{{ teamMembers.settle?.refereeServiceAmount ?? 0 }}</view>
					<view class="income_name">陪宠推广</view>
				</view>
				<view class="income_item">
					<view class="income_money">¥{{ teamMembers.settle?.serviceAmount ?? 0 }}</view>
					<view class="income_name">陪宠服务</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import api from "@/api/index";
import { useStudioStoreToRefs } from "@/store/useStudioStore";
import { useUserStoreToRefs } from "@/store/useUserStore";
import { onPullDownRefresh } from "@dcloudio/uni-app";

// 定义接口类型
interface PendingSettlem {
	totalAmount: number;
	mallAmount: number;
	refereeServiceAmount: number;
	serviceAmount: number;
}

interface Settle {
	totalAmount: number;
	mallAmount: number;
	refereeServiceAmount: number;
	serviceAmount: number;
}

interface IncomeData {
	pendingSettlem?: PendingSettlem;
	settle?: Settle;
}

const { identity, studio, studioBalance } = useStudioStoreToRefs();
const { userInfo } = useUserStoreToRefs();

// 初始化数据
const teamMembers = reactive<IncomeData>({});
const isLoading = ref(false);

// 显示加载提示
const showLoading = () => {
	isLoading.value = true;
	uni.showLoading({
		title: "加载中",
		mask: true
	});
};

// 隐藏加载提示
const hideLoading = () => {
	isLoading.value = false;
	uni.hideLoading();
};

// 显示错误提示
const showError = (message: string) => {
	uni.showToast({
		title: message,
		icon: "none",
		duration: 2000
	});
};

// 获取数据
const getData = async () => {
	if (isLoading.value) return;
	showLoading();
	try {
		const res = await api({
			method: "get",
			url: `/mall/studio/balanceRecord/getStudioIncome/${studio.value.id}`
		});
		Object.assign(teamMembers, res.data as IncomeData);
	} catch (error) {
		showError("数据加载失败，请稍后重试");
	} finally {
		hideLoading();
	}
};

// 跳转到详情页
const toDetail = () => {
	uni.navigateTo({
		url: `/pages/income/revenueOrders/index?studioId=${studio.value.id}&userId=${userInfo.value.id}`
	});
};

// 下拉刷新（防抖处理）
const onRefresh = async () => {
	await getData();
	uni.stopPullDownRefresh();
};

onMounted(() => {
	getData();
});

onPullDownRefresh(onRefresh);

defineExpose({ getData, onRefresh });
</script>

<style scoped lang="scss">
.team_members_page {
	padding: 32rpx;
	box-sizing: border-box;

	.all_income_block {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 48rpx 32rpx;
		box-sizing: border-box;

		.all_income_text {
			font-weight: bold;
			font-size: 26rpx;
			color: #5c5e5e;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.view_detail {
				display: flex;
				align-items: center;
			}
		}

		.all_income_money {
			font-weight: bold;
			font-size: 64rpx;
			color: #1b2120;
			margin-top: 16rpx;
		}

		.income_detail_box {
			margin-top: 64rpx;
			display: flex;
			flex-direction: row;

			.income_item {
				flex: 1;
				display: flex;
				flex-direction: column;

				.income_money {
					font-weight: bold;
					font-size: 30rpx;
					color: #5c5e5e;
				}

				.income_name {
					font-weight: 400;
					font-size: 26rpx;
					color: #7c807f;
					margin-top: 16rpx;
				}
			}
		}
	}
}

.m_b_24 {
	margin-bottom: 24rpx;
}
</style>
